{% load static from static %}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>聊天窗口界面</title>
 
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet">
<link rel="stylesheet" href="{% static '/css/reset.min.css' %}">
<link rel="stylesheet" href="{% static '/css/style.css' %}">
 
</head>
<body>
 
<div class="wrapper">
	<div class="container">
        <div class="left">
            <div class="top">
                <input type="text" placeholder="Search" />
                <a href="javascript:;" class="search"></a>
            </div>
            <ul class="people">
                <li class="person" data-chat="person2">
                    <img src="/static/images/user.png" alt="" />
                    <span class="name">{{admin_name}}</span>
                    <span class="preview">I was wondering...</span>
                </li>
            </ul>
        </div>
        <div class="right">
            <div class="top"><span>To: <span class="name">{{admin_name}}</span></span></div>
            <div class="chat" data-chat="person2" id="chat-send" >
                <div class="conversation-start">
                    <span>{{time}}</span>
                </div>
            </div>
            <div class="write">
                <a href="javascript:;" class="write-link attach"></a>
                <input type="text" id="text"/>
                <a href="javascript:;" class="write-link smiley"></a>
                <a onclick="sendMessage()"  class="write-link send"></a>
            </div>
        </div>
    </div>
</div>
 
<script  src="{% static '/js/index.js' %}"></script>
<script type="text/javascript">
    var socket=new WebSocket("ws://127.0.0.1:8000/room/{{group_number}}/");
    socket.onopen = function(event)
	{
	var tag=document.getElementById("chat-send");
	var d=document.createElement("div");
	d.className="bubble you";
	d.innerHTML ="连接成功";
	tag.appendChild(d);
	}
    function sendMessage(){
	let text=document.getElementById("text");
	var tag=document.getElementById("chat-send");
	var d=document.createElement("div");
	d.className="bubble me";
	d.innerHTML =text.value;
	tag.appendChild(d);
	socket.send(text.value);
	text.value=" ";
	}
	socket.onclose = function(){
	var tag=document.getElementById("chat-send");
	var d=document.createElement("div");
	d.className="bubble you";
	d.innerHTML ="服务器主动断开连接";
	tag.appendChild(d);
}
socket.onmessage=function(event){
    var tag=document.getElementById("chat-send");
	var d=document.createElement("div");
	d.className="bubble you";
	d.innerHTML =event.data;
	tag.appendChild(d);
	}
</script>
<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>